<template>
  <div class="about" ref="about" @click="hanldeCloes"> 
    
    <!-- <div class="ava">
      <div  @click="hanldeClick($event, item)" v-for="(item, index) in 10" :key="index"
      :style="{ left: (index + 1) * 150 + 'px' }">

      <el-image style="width: 100px; height: 100px" :src="src" fit="cover"></el-image>
    </div>
    </div> -->
    

    <el-card class="card" v-if="dialogVisible">
      <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
      <div style="padding: 14px;">
        <span>好吃的汉堡</span>
        <div class="bottom clearfix">
          <time class="time">{{ title }}</time>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'About',

  data() {
    return {
      title: '999',
      dialogVisible: false,
      innerHeight: 0,
      src: require('../assets/1.jpeg')
    };
  },
  created() {
    this.innerHeight = window.innerHeight
  },
  mounted(){
    this.dorpRain()
  },

  methods: {
     dorpRain(){
        setTimeout(() => {

                let el = document.createElement('div');
                el.setAttribute('class', 'ava');
                el.style.left = parseInt(Math.random() * 200, 10) + 'px';
                el.style.width =  '200px';
                el.style.height ='200px';
                this.$refs.about.appendChild(el);
                console.log(111)
                setTimeout(() => {
                  this.$refs.about.removeChild(el);
                }, 15000)
            

           this.dorpRain();
        }, 10000) 
    },
    hanldeCloes() {
      console.log(9999)
      this.dialogVisible = false

    },
    hanldeClick(e, item) {
      e.preventDefault();
      e.stopPropagation();
      this.title = item + '名字'
      this.dialogVisible = true
      console.log(8888)
    }
  },
};
</script>

<style lang="less" scoped>
.about {
  width: 100%;
  height: 100%;
  position: relative;

  .card {
    position: absolute;
    left: 50%;
    z-index: 999;
  } 
  .ava {
  position: absolute;
  animation: move 15s linear infinite;
}
}


@keyframes move {
  0% {
    bottom: 100%;
  }

  25% {
    bottom: 75%;
  }

  50% {
    bottom: 50%;
  }

  75% {
    bottom: 25%;
  }

  100% {
    bottom: 0%;
  }
}
</style>